<template>
	<view class="container">
		<uni-card title="附近快递点" style="margin-top: 0px;">
			<view v-for="(item,index) in list2" :key="index">
				<view class="" style="display: flex;">
					<image :src="item.image" style="height: 70px;width: 70px;" mode=""></image>
					<view class="item" style="margin-left: 10px;">
						<view class="">快递名称：{{item.title}}</view>
						<view class="">地址：{{item.address}}</view>
						<view class="">联系方式：{{item.phone}}</view>
					</view>
				</view>
				<view class="line"></view>
			</view>
		</uni-card>
		<uni-card title="我的快递" extra="6件" style="margin-top: 10px;">
			<view class=""></view>
			<view class="" style="display: flex;align-items: center;margin-left: 8px;margin-bottom: 5px;">
				<view class="" style="height: 7px;width: 7px;border-radius: 7px;background-color: rgb(26, 173, 25);">
				</view>
				<view class="" style="font-size: 16px;margin-left: 5px;">袜子</view>
			</view>
			<uni-steps direction="column" :options="list" :active="1"></uni-steps>
			<view class="line"></view>
			<view class="" style="display: flex;align-items: center;margin-left: 8px;margin-bottom: 5px;">
				<view class="" style="height: 7px;width: 7px;border-radius: 7px;background-color: rgb(26, 173, 25);">
				</view>
				<view class=""
					style="font-size: 16px;margin-left: 5px;display: flex;justify-content: space-between;flex: 1;">
					<view class="">裤子</view>
					<view class="" style="color: #007AFF;">待取件</view>
				</view>
			</view>
			<uni-steps @click.native="shou" direction="column" :options="list" :active="2"></uni-steps>
			<view class="line"></view>
			<view class="" style="display: flex;align-items: center;margin-left: 8px;margin-bottom: 5px;">
				<view class="" style="height: 7px;width: 7px;border-radius: 7px;background-color: rgb(26, 173, 25);">
				</view>
				<view class="" style="font-size: 16px;margin-left: 5px;">衣服</view>
			</view>
			<uni-steps direction="column" :options="list" :active="3"></uni-steps>
			<view class="line"></view>
			<view class="" style="display: flex;align-items: center;margin-left: 8px;margin-bottom: 5px;">
				<view class="" style="height: 7px;width: 7px;border-radius: 7px;background-color: rgb(26, 173, 25);">
				</view>
				<view class="" style="font-size: 16px;margin-left: 5px;">鞋子</view>
			</view>
			<uni-steps direction="column" :options="list" :active="4"></uni-steps>
			<view class="line"></view>
			<view class="" style="display: flex;align-items: center;margin-left: 8px;margin-bottom: 5px;">
				<view class="" style="height: 7px;width: 7px;border-radius: 7px;background-color: rgb(26, 173, 25);">
				</view>
				<view class="" style="font-size: 16px;margin-left: 5px;">电脑</view>
			</view>
			<uni-steps direction="column" :options="list" :active="4"></uni-steps>
			<view class="line"></view>
			<view class="" style="display: flex;align-items: center;margin-left: 8px;margin-bottom: 5px;">
				<view class="" style="height: 7px;width: 7px;border-radius: 7px;background-color: rgb(26, 173, 25);">
				</view>
				<view class="" style="font-size: 16px;margin-left: 5px;">干脆面</view>
			</view>
			<uni-steps direction="column" :options="list" :active="1"></uni-steps>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						title: '已发货',
						desc: '2023-03-05 13:55'
					}, {
						title: '已揽件',
						desc: '2023-03-06 13:55'
					}, {
						title: '待收货',
						desc: '2023-03-07 13:55'
					},
					{
						title: '已收货',
						desc: '2023-03-07 13:55'
					},
				],
				list2: [{
						image: "/static/b1.jpg",
						title: "顺丰快递",
						address: "小明街道100号",
						phone: "123456"
					},
					{
						image: "/static/b2.jpg",
						title: "邮政快递",
						address: "小明街道101号",
						phone: "123456"
					},
					{
						image: "/static/b3.jpg",
						title: "京东快递",
						address: "小明街道103号",
						phone: "123456"
					}
				]
			};
		},
		onLoad(item) {

		},
		onReady() {

		},
		onShow() {

		},
		methods: {
			shou() {
				uni.navigateTo({
					url: 'detail/detail',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	};
</script>

<style lang="scss">

</style>
